<template>
	<view class="sider-menu">
		<view class="menu-el" v-for="(item,index) in menuList" :key="index" :class="{'actived':item.category==currentMenu}" @click="switchMenu(item,index)">
			<image v-if="baseImgURL" :src="baseImgURL+'/menus/'+item.icon" mode="aspectFit" class="icon-el"></image>
			{{item.text}}
		</view>
	</view>
</template>

<script>
	import  {mapState} from 'vuex'
	export default {
		name:"SiderBar",
		data() {
			return {
				menuList:[{
					icon:'icon_hover_home.png',
					text:'首页',
					category:'home'
				},{
					icon:'icon_nor_banjishichuang.png',
					text:'班级视窗',
					category:'class'
				},{
					icon:'icon_nor_kechengbiao.png',
					text:'课程表',
					category:'course'
				},{
					icon:'icon_nor_ketangkaoqing.png',
					text:'课堂考勤',
					category:'attendance'
				},{
					icon:'icon_nor_shipingtonghua.png',
					text:'视频通话',
					category:'video'
				},{
					icon:'icon_nor_banjipingjia.png',
					text:'班级评价',
					category:'evaluate'
				},{
					icon:'icon_nor_duchaxunke.png',
					text:'红色教育',
					category:'supervision'
				}]
			};
		},
		computed:{
			...mapState(['classId','baseImgURL','currentMenu'])
		},
		methods:{
			switchMenu(item,index){
				this.$store.commit('updateCurrentMenu',item.category);
			}
		}
	}
</script>

<style lang="scss">
.sider-menu {
	width: 109.38upx;
	height: 362upx;
	background: url($imageurl+'/png_menu.png') left top no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	margin:0 11.72upx 10upx 15.63upx;
	.menu-el {
		flex:1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		line-height: 15.63upx;
		font-size: 8upx;
		padding-top: 3.3upx;
		padding-bottom: 3.3upx;
		color: #5E91F1;
		
		.icon-el {
			width: 19.14upx;
			height: 16.41upx;	
		}
		&.actived {
			background: #32B3FE;
			color: #fff;
		}
	}
}
</style>